<template>
  <PageWrapper contentBackground>
    <div v-if="isShow && userData.length" class="px-6 py-9">
      <FormTitle text="基本信息" />
      <div class="content mt-3">
        <a-descriptions :column="4">
          <a-descriptions-item label="承建商名称">
            {{ userData[0]?.contractorName || '' }}
          </a-descriptions-item>
          <a-descriptions-item label="办公地址">
            {{ userData[0]?.contractorAddress || '' }}
          </a-descriptions-item>
          <a-descriptions-item label="承建负责人">
            {{ userData[0]?.contractorHead || '' }}
          </a-descriptions-item>
          <a-descriptions-item label="手机号码">
            {{ userData[0]?.contractorHeadPhone || '' }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions :column="1">
          <a-descriptions-item label="承建商简介">
            {{ userData[0]?.contractorIntroduction || '' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <FormTitle text="施工队伍" />
      <div class="h-100">
        <BasicTable @register="registerTable" />
      </div>
      <FormTitle text="承建商资质" />
      <div class="h-100 mb-4">
        <BasicModelTable
          v-if="tableModalParams.modelId"
          :tableProps="{
            isCanResizeParent: true,
          }"
          :modalParams="tableModalParams"
        />
      </div>
    </div>
    <div v-else class="w-full h-87.5 flex items-center justify-center">
      <div class="text-center">
        <Empty />
        <a-button type="primary" @click="handleCreate">+ 添加承建商</a-button>
      </div>
      <RoleModal
        :projectId="projectId"
        @register="registerModal"
        @success="handleSuccess"
        :deptId="deptId"
      />
    </div>
  </PageWrapper>
</template>
<script lang="ts">
  import { PageWrapper } from '/@/components/Page';
  import RoleModal from './RoleModal.vue';
  import { Empty, Descriptions } from 'ant-design-vue';
  import { defineComponent, ref, onBeforeMount } from 'vue';
  import FormTitle from '../components/FormTitle.vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { columns } from './design.data';
  import { getContractorInfoListApi } from '/@/api/zkrq/projectManagement';
  import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
  import { getDictTypeListApi } from '/@/api/admin/dict';
  const MODULE_TYPE = 'module_type'; //字典

  export default defineComponent({
    name: 'Contractor',
    components: {
      PageWrapper,
      Empty,
      RoleModal,
      BasicTable,
      FormTitle,
      [Descriptions.name]: Descriptions,
      [Descriptions.Item.name]: Descriptions.Item,
      BasicModelTable: createAsyncComponent(
        () => import('/@/components/ModelTable/src/index.vue'),
        {
          loading: true,
        },
      ),
    },
    props: {
      modalParams: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props) {
      const [registerModal, { openModal }] = useModal();
      let setData;
      console.log('props?.modalParams?.record--------------------', props?.modalParams?.record);

      const projectId = ref(props?.modalParams?.record?.project_id || '');

      const deptId = ref(props?.modalParams?.record?.dept_id ?? '');
      const userData = ref<any>([]);
      const isShow = ref(true);
      const tableModalParams = ref<Indexable>({});
      onBeforeMount(() => {
        init();
      });
      async function init() {
        isShow.value = true;

        const ret = await await getContractorInfoListApi({ projectId: projectId.value });
        if (!ret) {
          isShow.value = false;
        }

        setData = [ret];
        userData.value = setData;
        const res = await getModelId();
        tableModalParams.value.record = props.modalParams.record;
        if (res[0]) {
          tableModalParams.value.modelId = res[0].value;
        }
      }
      async function getModelId() {
        return await getDictTypeListApi({
          type: MODULE_TYPE,
        });
      }
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }

      const [registerTable, { reload }] = useTable({
        columns,
        dataSource: userData,
        useSearchForm: false,
        showTableSetting: false,
        bordered: false,
        showIndexColumn: true,
        isCanResizeParent: true,
      });

      function handleSuccess() {
        init();
        reload();
      }
      return {
        registerTable,
        registerModal,
        handleCreate,
        handleSuccess,
        userData,
        projectId,
        isShow,
        tableModalParams,
        deptId,
      };
    },
  });
</script>

<style lang="less" scoped>
  .basic-model-spin {
    height: 100%;

    ::v-deep(.ant-spin-container) {
      height: 100%;
    }
  }
</style>
